import {ScrollView, Text, View} from 'react-native';
import React, {Component} from 'react';
import BaseForm from '../../components/elements/BaseForm';
import {Icon} from '@rneui/themed';
export default class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '表单',
      loading: false,
      formData: {},
    };
    this.demoForm = React.createRef();
  }

  componentDidMount() {}

  render() {
    let _this = this;
    const formColumn = [
      {
        type: 'TextInput',
        field: 'name',
        title: '用户名',
        defaultValue: 'admin',
        editable: false,
        required: true,
        onValueChange: value => {
          console.log(value);
        },
      },
      {
        type: 'TextInput',
        field: 'first_name',
        title: '姓',
        editable: true,
        required: true,
        rules: {max: 2, min: 1},
        onValueChange: value => {
          let formData = this.demoForm.current.getFormData();
          formData.name =
            (formData.first_name === null ? '' : formData.first_name) +
            (formData.last_name === null ? '' : formData.last_name);
          this.demoForm.current.setFormData(formData);
        },
      },
      {
        type: 'TextInput',
        field: 'last_name',
        title: '名',
        editable: true,
        required: true,
        rules: {max: 3, min: 1},
        onValueChange: value => {
          let formData = this.demoForm.current.getFormData();
          formData.name =
            (formData.first_name === null ? '' : formData.first_name) +
            (formData.last_name === null ? '' : formData.last_name);
          this.demoForm.current.setFormData(formData);
        },
      },
      {
        type: 'TextInput',
        field: 'mail',
        title: '邮箱',
        required: false,
        rules: {
          regex: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
          message: '邮箱格式不正确!',
        },
        onValueChange: value => {
          let formData = this.demoForm.current.getFormData();
          formData.name = formData.first_name + formData.last_name;
          this.demoForm.current.setFormData(formData);
        },
      },
      {
        type: 'TextInput',
        field: 'telephone',
        title: '电话',
        defaultValue: '10086',
        rules: {
          regex: /^1[3-9][0-9]{9}$/,
          message: '电话格式不正确!',
        },
        suffix: (
          <Icon name="telephone" size={40} color={'orange'} type="foundation" />
        ),
        onValueChange: value => {
          let formData = this.demoForm.current.getFormData();
          formData.name = formData.first_name + formData.last_name;
          this.demoForm.current.setFormData(formData);
        },
      },
      {
        type: 'TextInput',
        field: 'phone',
        title: '手机',
        rules: {
          regex: /^1[3-9][0-9]{9}$/,
          message: '手机格式不正确!',
        },
        prefix: <Text style={{color: 'gray'}}>+86</Text>,
        onValueChange: value => {
          let formData = this.demoForm.current.getFormData();
          formData.name = formData.first_name + formData.last_name;
          this.demoForm.current.setFormData(formData);
        },
      },
    ];
    const operation = [
      {
        text: '清除',
        disabled: () => {
          return true;
        },
        loading: false,
        style: {backgroundColor: 'green'},
        callback(p) {
          console.log(p);
        },
      },
      {
        text: '保存',
        disabled: false,
        loading: () => {
          return this.state.loading;
        },
        style: {backgroundColor: 'red'},
        callback(p) {
          _this.setState({
            loading: true,
          });
          setTimeout(() => {
            _this.setState({
              loading: false,
              formData: _this.demoForm.current.getFormData(),
            });
          }, 2000);
        },
      },
    ];
    return (
      <View>
        <BaseForm
          ref={this.demoForm}
          formColumn={formColumn}
          operation={operation}
        />
        <ScrollView
          style={{
            minHeight: '20%',
            width: '100%',
            backgroundColor: 'white',
            marginTop: '5%',
            marginLeft: '1%',
            marginRight: '1%',
            padding: '1%',
          }}>
          <Text>{JSON.stringify(this.state.formData, null, '\t')}</Text>
        </ScrollView>
      </View>
    );
  }
}
